Con html tutti hanno usato le tabelle per realizzare l'impaginazione dei documenti, questo non era proibito, ma le tabelle erano nate per intabbellare i dati; con XHTML le tabelle devono tornare alla loro funzione originaria ed usare i livelli come contenitori dei vari elementi della pagina.
Introduciamo dunque il livello che conterrà la nostra immagine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
h1 { color: black; background: yellow; }
#immagine{position:absolute;top:100px;right:200px;}
</style>
<html>
<head>
<title>0001: "Gol di Sergio Verdi"</title>
</head>
<body>
<h1>"Gol di Sergio Verdi"</h1>
<p>
<div id="immagine"><img src="gol.jpg" align="right" alt="Gol" /></div>
Oggi allo stadio grande esibizione<br />
del centrocampista Sergio Verdi.
</p>
<span> Marco Bianchi</span>
</body>
</html
Come si vede tra gli attributi di stile è stata aggiunta la riga:
#immagine{position:absolute;top:100px;right:200px;}
Il cancelletto è un simbolo selettore di livello, mentre il nome immagine è inventato e può essere di fantasia purchè univoco: non è possibile chiamare due livelli differenti con lo stesso nome.
Dentro le parentesi graffe abbiamo position : absolute che indica come la posizione sia da considerarsi assoluta all'interno dell'intero documento; top:100px indica che il livello è a 100 pixel dall'alto o top dello schermo ed è a 200px da destra (right); definita in questo modo la posizione, all'interno del body posso richiamare l'istruzione tramite il tag <div id="immagine"></div> dove div indica un livello mentre id è l'identificatore del livello specificatamente per il nome che lo segue dopo il simbolo uguale.
Tratto da: www.webmasterpoint.org
Stampa 
